.collision {
    td {
        border: 1px solid #c3c3c3;
        font-size: var(--step--1);
    }

    .collision__header {
        position: relative;
        min-height: 750px;
        display: flex;
        flex-direction: column;
    }

    .collision__header-image {
        position: absolute;
        inset: 0;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    .collision__header-content {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        padding: var(--space-xl) var(--space-m);
        display: flex;
        flex-direction: column;
        gap: var(--space-2xl);
        z-index: 1;
    }

    .collision__header-top {
        display: flex;
        justify-content: space-between;
    }

    .collision__header-partsplus {
        color: white;
        font-size: var(--step-1);
    }

    .collision__header-title {
        max-width: 500px;
        font-size: var(--step-3);
        color: #fff;
    }

    .collision__content {
        padding: 0 var(--space-m);
        width: 100%;
        max-width: 1440px;
        margin: 0 auto var(--space-2xl);
    }

    .collision__dropdowns {
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
    }

    .collision__dropdown-button {
        display: block;
        width: 100%;
        padding: 10px 20px;
        background-color: #eee;
        color: #444;
        border: none;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        transition: background-color 0.4s ease-in-out;
        cursor: pointer;
    }

    .collision__dropdown-button:is(:hover, :focus),
    .collision__dropdown[open] .collision__dropdown-button {
        background-color: rgb(209, 209, 209);
    }
}

.foot {
    background-color: #02263d;
    margin-top: var(--space-xl);

    .foot__content {
        max-width: 1440px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 10px;
        margin: 0 auto;
        padding: var(--space-l) var(--space-m);
        text-align: center;
        gap: var(--space-m);
    }

    .foot__header {
        color: #fff;
        font-size: var(--step-0);
    }

    .foot__terms {
        font-size: var(--step--2);
        color: #fff;
    }
}

@media only screen and (max-width: 996px) {
    .collision {
        td {
            font-size: var(--step--2);
        }

        .collision__header-image {
            object-position: 60%;
        }

        .collision__header-partsplus {
            display: none;
        }
    }
}